<template>
  <div id="app">
    <el-container>
      <el-main>
        <div class="content">
          <h1>芝士思云课堂</h1>
          <h1>欢迎来到后台管理系统</h1>
          <p>这里可以展示一些统计信息或者快速入口等。</p>
          <br />
          <br />
          <img src="../assets/images/js.png"/>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>

img {
  width: 436px;
  height: 404px;
}
#app {
  font-family: 'Roboto', sans-serif; /* 使用Roboto字体 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100vh; /* 使应用高度占满整个视口 */
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: flex-start; /* 垂直居中偏上 */
  padding-top: 20px; /* 添加顶部内边距 */
}

.el-container {
  width: 100%; /* 容器宽度占满父元素 */
  height: 100%; /* 容器高度占满父元素 */
}

.el-main {
  background-color: #F1F8FE;
  color: #333;
  text-align: center;
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列子元素 */
  justify-content: flex-start; /* 垂直居中偏上 */
  align-items: center; /* 水平居中 */
  padding: 20px; /* 添加一些内边距 */
}

.content {
  text-align: center; /* 内容居中 */
  color: #3498db; /* 蓝色调字体 */
}

h1 {
  font-size: 24px; /* 优化字体大小 */
  margin: 10px 0; /* 添加行间距 */
  color: #3498db; /* 蓝色调字体 */
}

p {
  font-size: 16px; /* 优化字体大小 */
  margin: 10px 0; /* 添加行间距 */
  color: #3498db; /* 蓝色调字体 */
}

/* 引入Roboto字体 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
</style>
